<!-- 企业信息变更详情 -->
<template>
  <div class="detail-index-content">
    <Modal
      v-model="modalValue"
      title="信息详情"
      footer-hide
      :width="isCompanyChange ? '80%' : '50%'"
      @on-cancel="cancel"
    >
      <div class="states-box">
        <BtnBox isIcon type="light-blue" :text="formData.auditStatusName" />
        <BtnText type="primary"
          >变更时间：{{ formData.createDateTime }}</BtnText
        >
      </div>
      <div class="page-main-content" v-if="isCompanyChange">
        <div class="page-main-content-head">
          <h2>{{ formData.companyName }}</h2>
        </div>
        <h3>企业基本信息</h3>
        <div class="page-main-form-box">
          <Row>
            <Col span="8">
              <MainFormItem title="企业名称">{{
                formData.companyName
              }}</MainFormItem>
            </Col>
            <Col span="8"
              ><MainFormItem title="上级组织">{{
                formData.parentName
              }}</MainFormItem></Col
            >
            <Col span="8"
              ><MainFormItem title="证件类型">{{
                formData.companyCardTypeName
              }}</MainFormItem></Col
            >
            <Col span="8"
              ><MainFormItem title="证件号码">{{
                formData.companyCardNumber
              }}</MainFormItem></Col
            >
            <Col span="8"
              ><MainFormItem title="注册地址">{{
                formData.companyAddress
              }}</MainFormItem></Col
            >
            <Col span="8"
              ><MainFormItem title="证件照片">
                <ViewImg
                  isPreview
                  isViewBtn
                  isIcon
                  errorMsg="证件照片"
                  :fileList="formData.companyIdFiles"
                ></ViewImg> </MainFormItem
            ></Col>
            <Col span="24"
              ><MainFormItem title="业务范围">{{
                formData.businessRange
              }}</MainFormItem></Col
            >
          </Row>
        </div>
        <Divider />
        <h3>企业服务能力</h3>
        <div class="page-main-form-box">
          <Row>
            <Col span="24"
              ><MainFormItem title="服务地区">{{
                convertStr(formData.serviceArea, "provinceName", "cityName")
              }}</MainFormItem></Col
            >
            <Col span="24"
              ><MainFormItem title="产业标记">{{
                convertStr(formData.serviceType, "serviceTypeName")
              }}</MainFormItem></Col
            >
          </Row>
        </div>
        <Divider />
        <h3>企业资质</h3>
        <div class="page-main-form-box page-main-form-table">
          <Table :columns="columns" :data="formData.companyAptitudeFiles">
            <template slot-scope="{ row }" slot="file">
              <ViewImg></ViewImg>
            </template>
          </Table>
        </div>
        <Divider />
        <h3>备案项目</h3>
        <div class="page-main-form-box page-main-form-table">
          <Table :columns="columnsRecord" :data="listData">
            <template slot-scope="{ row }" slot="rate">
              <div class="repetition-rate">
                <span>{{row.repetitionRate}}%</span><ViewImg :isImg="false"></ViewImg>
              </div>
            </template>
          </Table>
        </div>
      </div>
      <div class="page-main-content" v-else>
        <div class="page-main-content-head">
          <h2>{{ formData.companyName }}</h2>
        </div>
        <h3>企业收益规则</h3>
        <div class="page-main-form-box">
          <Row>
            <Col span="12"
              ><MainFormItem title="规则说明">
                <!-- {{ formData.companyRuleFiles }} -->
                <ViewImg
                  isPreview
                  errorMsg="规则说明"
                  :fileList="formData.companyRuleFiles"
                ></ViewImg></MainFormItem
            ></Col>
            <Col span="12"
              ><MainFormItem title="收益规则"
                >{{ formData.companyDivideIntoRuleValue }}%</MainFormItem
              ></Col
            >
          </Row>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script type="text/javascript">
import {
  GetCompanyChangeHistoryData, //查询企业信息变更前后顺序
} from "@/api/enterpriseInforManage.js";

import { returnStr } from "@/libs/util.js";

export default {
  name: "changeBeforeAfter",
  components: {},
  props: {
    changeTypes: {
      type: Number,
      default: 0,
    },
    companyId: {
      type: String,
      default: "",
    },
    isHide: {
      type: Boolean,
      default: false,
    },
    // 是否为公司变更
    isCompanyChange: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formData: {
        auditStatus: "",
        auditStatusName: "",
        baseStatus: "",
        baseStatusName: "",
        businessLicenseImages: "",
        city: "",
        companyAddress: "",
        companyCardNumber: "",
        companyCardTypeName: "",
        companyCnSimpleName: "",
        companyCode: "",
        companyEnSimpleName: "",
        companyId: "",
        companyIdFiles: [],
        companyItems: [],
        companyLevel: "",
        companyLevelName: "",
        companyName: "",
        companyRuleFiles: [],
        contactMobile: "",
        contactPerson: "",
        createDateTime: "",
        createUserName: "",
        district: "",
        isDel: false,
        logoUrl: "",
        parentId: "",
        province: "",
        rootId: "",
        ruleStatus: "",
        ruleStatusName: "",
        serviceArea: [],
        serviceType: [],
        companyAptitudeFiles: [],
        status: "",
        statusName: "",
        street: "",
        updateDateTime: "",
        updateUserName: "",
      },
      columns: [
        {
          title: "资质名称",
          key: "companyAptitudeName",
        },
        {
          title: "等级",
          key: "lv",
        },
        {
          title: "资质附件",
          slot: "file",
        },
        {
          title: "有效期截止时间",
          key: "validEndDate",
        },
      ],
      columnsRecord: [
        {
          title: "项目名称",
          key: "name",
        },
        {
          title: "重复率",
          slot: "rate",
        },
        {
          title: "业主方",
          key: "name",
        },
        {
          title: "施工方",
          key: "name",
        },
        {
          title: "项目地址",
          key: "name",
        },
        {
          title: "预计产值规模(万元)",
          key: "name",
        },
        {
          title: "发布时间",
          key: "name",
        },
      ],
      listData: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
        },
      ],
      modalValue: false,
    };
  },
  methods: {
    // 获取企业信息详情
    async GetCompanyChangeHistoryDataData() {
      let params = {
        id: this.$props.companyId,
        dataType: this.$props.changeTypes,
      };
      let data = await GetCompanyChangeHistoryData(params);
      this.formData = data;
    },
    convertStr(data, key, keyTo) {
      return returnStr(data, key, keyTo);
    },
    cancel() {
      this.$emit("update:updateIsHide", false);
    },
  },
  created() {
    // 企业公司变更
    this.GetCompanyChangeHistoryDataData();
    this.modalValue = this.$props.isHide;
  },
};
</script>

<style lang="less" scoped>
.page-main-content {
  background: #fff;
  border-radius: 6px;
  max-height: 60vh;
  overflow: auto;
  margin-top: 0;
}

.states-box {
  padding-bottom: 20px;
  margin: 0 0 20px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;
}
</style>
